/*
 * @Descripttion: scss 自定义方法集
 * @Define: @mixin fn($1: null, $2: null, $3: null, $4: null) { }
 * @Use: @include fn($1: 10px, $2: 20px, $3: 30px, $4: 40px)
 * @Author: yeming
 * @Date: 2018-06-05 15:51:42
 */

/* ========================== 容器处理 ========================== */

// 宽高
@mixin wh($w: 100%, $h: $w) {
  width: $w;
  height: $h;
}

// 行高
@mixin lh($h: 100%) {
  height: $h;
  line-height: $h;
}

@mixin display($v: block) {
  display: $v;
}

/* flex 纵向布局*/

@mixin flex-column($direction: column) {
  display: flex;
  flex-direction: $direction
}

@mixin pos-abs($p: absolute, $l: null, $r: null, $t: null, $b: null, $z: null) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
  z-index: $z;
}

@mixin margin($t: null, $b: null, $l: null, $r: null, $m: null) {
  margin-top: $t;
  margin-bottom: $b;
  margin-left: $l;
  margin-right: $r;
  margin: $m;
}

@mixin padding($t: null, $b: null, $l: null, $r: null, $p: null) {
  padding-top: $t;
  padding-bottom: $b;
  padding-left: $l;
  padding-right: $r;
  padding: $p;
}

@mixin border($b: null, $bt: null, $bb: null, $bl: null, $br: null, $bc: null, $bs: null, $bra: null, $bsd: null) {
  border: $b;
  border-top: $bt;
  border-bottom: $bb;
  border-left: $bl;
  border-right: $br;
  border-collapse: $bc;
  border-spacing: $bs;
  border-radius: $bra;
  box-shadow: $bsd;
}

@mixin bg($bg: null, $c: null, $s: null, $img: null, $p: null, $r: null, $cl: null, $o: null) {
  background: $bg;
  background-color: $c;
  background-size: $s;
  background-image: $img;
  background-position: $p;
  background-repeat: $r;
  background-clip: $cl;
  background-origin: $o;
}

/**
 * rgba 兼容处理方案
 * $bgcolor 色值(red、#f0f)
 * $opacity 透明度
 * $support-for-ie 是否支持IE，默认true
 */

@mixin bg-transparent($bgcolor, $opacity, $support-for-ie: true) {
  background-color: rgba($bgcolor, $opacity);

  @if $support-for-ie {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))}, endColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))});

    :root & {
      filter: none;
    }
  }
}

/**
 * 容器垂直水平居中（作用于父元素，子元素须有固定宽高）
 */

@mixin vhc-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * 容器垂直水平居中（作用于父元素，子元素须有固定宽高）
 */

@mixin vhc-pos() {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/**
 * 容器垂直水平居中
 * 利用 translate 可以实现未知宽高的东东水平/垂直居中（作用于子元素，父元素相对定位）
 * $direction (horizontal - 水平居中， vertical - 垂直居中，both - 水平垂直居中[默认] )
 */

@mixin vhc-translate($direction: both) {
  position: absolute;

  @if $direction==both {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }

  @else if $direction==horizontal {
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  @else if $direction==vertical {
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

/* ========================== 文本处理 ========================== */

/**
 * 文本垂直水平居中
 * 利用 translate 可以实现未知宽高的东东水平/垂直居中（作用于子元素，父元素相对定位）
 * $direction (horizontal - 水平居中， vertical - 垂直居中，both - 水平垂直居中[默认] )
 */

@mixin vhc-text($lh: null, $align: center) {
  line-height: $lh;
  text-align: $align;
}

@mixin font($s: null, $w: null, $c: null) {
  font-size: $s;
  font-weight: $w;
  color: $c;
}

// 文本溢出省略号
@mixin ellipsis-clamp($line: 1) {
  @if ($line > 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }

  @else {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ========================== 动画处理 ========================== */

// 包含transition和animate系列，
@mixin animate($t: null) {
  transition: $t;
}

@mixin translate($tx: null, $ty: null, $tz: null, $t2d: null, $t3d: null) {
  transform: translateX($tx);
  transform: translateY($ty);
  transform: translateZ($tz);
  transform: translate($t2d);
  transform: translate3d($t3d);
}

@mixin scale($sx: null, $sy: null, $sz: null, $s2d: null, $s3d: null) {
  transform: scaleX($sx);
  transform: scaleY($sy);
  transform: scaleZ($sz);
  transform: scale($s2d);
  transform: scale($s3d);
}

@mixin rotate($rx: null, $ry: null, $rz: null, $r2d: null, $r3d: null) {
  transform: rotateX($rx);
  transform: rotateY($ry);
  transform: rotateZ($rz);
  transform: rotate($r2d);
  transform: rotate($r3d);
}

@mixin skew($skx: null, $sky: null, $sk2d: null) {
  transform: skewX($skx);
  transform: skewY($sky);
  transform: skew($sk2d);
}
